@charset "utf-8";
@import "common/common";
.active .upleft{
    animation-name:  zoomInDown;
}
.active .test{
    animation-name:  zoomInDown;
    animation-delay: 300ms;
}
.active .year{
    animation-name:zoomInDown ;
    animation-delay: 600ms;
}
.active .yong{
    animation-name:zoomInDown ;
    animation-delay: 900ms;
}
.active .gao{
    animation-name:zoomInDown ;
    animation-delay: 1.1s;
}
.active .dong{
    animation-name:zoomInUp ;
    animation-delay: 1.4s;
}
.active .yu img:nth-of-type(1){
    animation-name:zoomInUp ;
    animation-delay: 300ms;
}
.active .yu img:nth-of-type(2){
    animation-name:zoomInUp ;
    animation-delay: 600ms;
}
.active .yu img:nth-of-type(4){
    animation-name:zoomInUp ;
    animation-delay: 900ms;
}
.active .yu img:nth-of-type(3){
    animation-name:zoomInUp ;
    animation-delay: 1.2s;
}
.active form{  
    animation-name:zoomInUp ;
    animation-delay: 1s;

}
//.active .yong{
//  animation-name:bounceInDown ;
//  animation-delay: 600ms;
//}
.web {
    background: url(../img/beijing.jpg) repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    header {
        .upleft {
//          line-height: n(160px);
            
            margin-left: n(50px);
            img {
                width: 10%;
                vertical-align: middle;
            }
            span {
                display: inline-block;
                font-size: n(50px);
                color: white;
                vertical-align: middle;
            }
        }
    }
    section {
        text-align: center;
//      margin-top: n(156px);
            margin-top: n(20px);
        .test {
            width: 88%;
            margin: 0 auto;
            img {
                width: 100%;
            }
        }
        .year {
           img{
               width: 50%;
           }
        }
        .yong{
            img{
                width: 65%;
            }
        }
        .yue {
//          margin-left: 50px;
            position: relative;
            img {
                position: absolute;
                width: 10%;
             top: 50px;
               right: 50px;
                  animation: sze 5s linear infinite;
                transform-style: preserve-3d;
            }
           
        }
        .gao{
          
            img{
                
                border-radius:50% ;
                box-shadow:0 0 0px rgba(96,200,214,1);
               margin-left: 205px;
                width: 10%;
                animation: auto 1s linear infinite;
                transform-style: preserve-3d;
                
            }
        }
        @keyframes sze {
                to {
                    transform:   translateX(-300px);
                }
                
            }
            
         @keyframes auto {
                10% {
                   box-shadow: 0 0 10px rgba(96,200,214,1);
                }
                30%{
                    box-shadow: 0 0 30px rgba(96,200,214,1);
                }
                60%{
                    box-shadow: 0 0 50px rgba(96,200,214,1);
                }
                80%{
                    box-shadow: 0 0 80px rgba(96,200,214,1);
                }
            }
    }
    footer {
        text-align: center;
        position: relative;
        .dong {
            img {
                
                width: 40%;
            }
        }
        a {
            display: block;
            margin: 0 auto;
            line-height: n(76px);
            text-align: center;
            width: n(192px);
            height: n(76px);
            font-size: n(36px);
            border-radius: n(50px);
            background: #ffb800;
            margin-top: n(26px);
            color: black;
        }
        .yu {
            width: 100%;
            img {
                position: absolute;              
                width: 20%;
                &:nth-of-type(1) {
                    position: absolute;
                     bottom: 150px;
                left: 35px;
                }
                &:nth-of-type(2) {
                    position: absolute;
                     bottom: 160px;
                    right: 30px;
                }
                &:nth-of-type(3) {
                    position: absolute;
                   bottom: 50px;
                    right: 20px;
                }
                &:nth-of-type(4) {
                    position: absolute;
                    bottom: 50px;
                    left: 32px;
                }
            }
        }
    }
}